<template>
  <div class="container" v-loading="loading">
    <el-divider content-position="left"><span class="title-left-color">订单信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="下单平台:">{{ form.platform_name }}</el-descriptions-item>
        <el-descriptions-item label="手机品牌:">{{ form.brand_name }}</el-descriptions-item>
        <el-descriptions-item label="手机型号:">{{ form.goods_name }}</el-descriptions-item>
        <el-descriptions-item label="手机内存:">{{ form.sku_key_name }}</el-descriptions-item>
        <el-descriptions-item label="成色:">{{ form.fineness_name }}</el-descriptions-item>
        <el-descriptions-item label="服务:">{{ form.service_key_name }}</el-descriptions-item>
        <el-descriptions-item label="手机售价:">{{ form.goods_price }}</el-descriptions-item>
        <el-descriptions-item label="订单总金额:">{{ form.total_amount }}元</el-descriptions-item>
        <el-descriptions-item label="创建时间:">{{ handleVerifyFormatDate(form.create_time) }}</el-descriptions-item>
        <el-descriptions-item label="发货时间:">{{ handleVerifyFormatDate(form.shipping_time) }}</el-descriptions-item>
        <el-descriptions-item label="取消时间:">{{ handleVerifyFormatDate(form.cancel_time) }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">收货信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="下单人姓名:">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号:">{{ form.mobile }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="收货地址:">{{ form.province_name }}{{ form.city_name }}{{ form.district_name }} {{ form.address }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="用户备注:">{{ form.user_note }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="平台备注:">{{ form.admin_note }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left" v-if="form.bindStore.store_name !== ''"><span class="title-left-color">绑定店铺信息</span></el-divider>
    <div style="margin: 0 70px" v-if="form.bindStore.store_name !== ''">
      <el-descriptions :column="4" size="default">
        <el-descriptions-item label="店铺名称:">{{ form.bindStore.store_name }}</el-descriptions-item>
        <el-descriptions-item label="手机号:">{{ form.bindStore.store_phone }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider content-position="left"><span class="title-left-color">账单信息</span></el-divider>
    <div style="margin: 0 70px">
      <el-table :data="form.order_action" border class="table" :reserve-selection="true">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="user_type_name" label="用户类型" align="center"> </el-table-column>
        <el-table-column prop="action_user" label="用户id" align="center"> </el-table-column>
        <el-table-column prop="user_name" label="用户名" align="center" :formatter="handleFormatterUserName"> </el-table-column>
        <el-table-column prop="status_desc" label="描述" align="center"> </el-table-column>
        <el-table-column prop="action_note" label="备注" align="center"> </el-table-column>
        <el-table-column prop="log_time" label="创建时间" align="center" :formatter="(row: IActionLog) => handleVerifyFormatDate(row.log_time)"> </el-table-column>
      </el-table>
    </div>
    <div class="footer-center">
      <el-button :disabled="disabledbtn" @click="cancelSubmit">返 回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { postOrPutType } from "@/constants";
import type { HasId, ViewMode } from "@/types/common";
import { handleVerifyFormatDate } from "@/utils/utils";
import { useState } from "@/hooks/useState.ts";
import type { IActionLog, IDirectPurchaseOrderVO } from "@/types/rentMachineManage/directPurchaseOrderInfo";
import { getRentMobileOrderByIdInfo } from "@/utils/api/rentMobileOrder";
const { disabledbtn, loading, toggleState } = useState();
interface Props {
  id: number;
}
const { id } = defineProps<Props>();

const formStatus = defineModel<ViewMode>("formStatus", { required: true });
const emit = defineEmits<{
  handleInitData: [];
  handleToPrint: [id: number];
}>();

const isDisabledbtn = ref(false);
const methodType = ref<postOrPutType>("PUT");
const form = reactive<IDirectPurchaseOrderVO>({
  id: 0,
  order_sn: "",
  brand_name: "",
  goods_name: "",
  sku_key_name: "",
  goods_price: "",
  total_amount: "",
  service_key_name: "",
  name: "",
  mobile: "",
  province_name: "",
  city_name: "",
  district_name: "",
  address: "",
  user_note: "",
  admin_note: "",
  fineness_name: "",
  bindStore: {
    store_name: "",
    store_phone: ""
  },
  order_action: [],
  create_time: 0,
  pay_time: 0,
  cancel_time: 0,
  shipping_time: 0,
  platform_name: ""
});

onMounted(() => {
  console.log("Component mounted!");
});

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    isDisabledbtn.value = true;
  },
  edit: () => {
    methodType.value = "PUT";
  },
  add: () => {
    methodType.value = "POST";
  },
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});
/*  */
watch(
  () => id,
  newValue => {
    if (newValue == 0) {
      /* 初始化数据 */
    } else {
      form.id = newValue;
      handleGetMallOrderByIdInfo(id);
    }
  }
);

/* 初始化数据 */
function handleInitData() {
  methodType.value = "POST";
  isDisabledbtn.value = false;
  form.id = 0;

  form.order_sn = "";
  form.brand_name = "";
  form.goods_name = "";
  form.sku_key_name = "";
  form.goods_price = "";
  form.total_amount = "";
  form.service_key_name = "";
  form.name = "";
  form.mobile = "";
  form.province_name = "";
  form.city_name = "";
  form.district_name = "";
  form.address = "";
  form.user_note = "";
  form.admin_note = "";
  form.fineness_name = "";
  form.bindStore.store_name = "";
  form.bindStore.store_phone = "";

  form.order_action = [];
  form.create_time = 0;
  form.pay_time = 0;
  form.cancel_time = 0;
  form.shipping_time = 0;
  form.platform_name = "";
}
/* 获取订单详情数据 */
function handleGetMallOrderByIdInfo(id: number) {
  toggleState(true);
  getRentMobileOrderByIdInfo<IDirectPurchaseOrderVO, HasId>({ id })
    .then(res => {
      form.id = res.result.id;
      form.order_sn = res.result.order_sn;
      form.platform_name = res.result.platform_name;
      form.brand_name = res.result.brand_name;
      form.goods_name = res.result.goods_name;
      form.sku_key_name = res.result.sku_key_name;
      form.goods_price = res.result.goods_price;
      form.total_amount = res.result.total_amount;
      form.service_key_name = res.result.service_key_name;

      form.name = res.result.name;
      form.mobile = res.result.mobile;
      form.province_name = res.result.province_name;
      form.city_name = res.result.city_name;
      form.district_name = res.result.district_name;
      form.address = res.result.address;
      form.user_note = res.result.user_note;
      form.admin_note = res.result.admin_note;
      form.fineness_name = res.result.fineness_name;
      form.bindStore = res.result.bindStore;
      form.order_action = res.result.order_action;
      form.create_time = res.result.create_time;
      form.pay_time = res.result.pay_time;
      form.cancel_time = res.result.cancel_time;
      form.shipping_time = res.result.shipping_time;
    })
    .catch(() => {})
    .finally(() => {
      toggleState(false);
    });
}

/* 保存或编辑 取消提交 */
function cancelSubmit() {
  // clearData();
  // activeName = "one";
  emit("handleInitData");
}
/* 格式化用户 */
function handleFormatterUserName(row: IActionLog) {
  /* user_type 0:后台用户，1:店铺，2：普通用户 */
  if (row.user_type === 0 && row.masterUser !== null) {
    return `${row.masterUser.mobile},${row.masterUser.nick_name}`;
  } else if (row.user_type === 1 && row.storeUser !== null) {
    return `${row.storeUser.contacts_mobile}`;
  } else if (row.user_type === 2 && row.user !== null) {
    return `${row.user.mobile}`;
  }
  return "";
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

.img-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
